<script setup lang="ts">
import UvLine from '@/uv-ui/components/nv-line/uv-line.vue'

const startTime = ref(uni.$uv.timeFormat(new Date().getTime(), 'yyyy/mm/dd 00:00'))
const endTime = ref(uni.$uv.timeFormat(new Date().getTime(), 'yyyy/mm/dd 23:59'))

const show = ref(false)

const currentMode = ref('today')

const pickerModel = ref('start')

const pickerValue = ref(new Date(startTime.value))

function changePicker(type: string, value: string) {
  pickerModel.value = type
  pickerValue.value = new Date(value)
}

function formatter(type, value) {
  switch (type) {
    case 'year':
      return `${value}年`
    case 'month':
      return `${value}月`
    case 'date':
      return `${value}日`
    case 'hour':
      return `${value}时`
    case 'minute':
      return `${value}分`
    default:
      return value
  }
}

function modeChange({ value }) {
  const date = new Date()
  endTime.value = uni.$uv.timeFormat(date.getTime(), 'yyyy/mm/dd 23:59')
  switch (value) {
    case 'today':
      startTime.value = uni.$uv.timeFormat(date.getTime(), 'yyyy/mm/dd 00:00')
      break
    case 'yesterday':
      startTime.value = uni.$uv.timeFormat(date.getTime() - 24 * 60 * 60 * 1000, 'yyyy/mm/dd 00:00')
      endTime.value = uni.$uv.timeFormat(date.getTime() - 24 * 60 * 60 * 1000, 'yyyy/mm/dd 23:59')
      break
    case 'week':
      // 获取本周第一天
      startTime.value = uni.$uv.timeFormat(
        date.getTime() - (date.getDay() - 1) * 24 * 60 * 60 * 1000,
        'yyyy/mm/dd 00:00',
      )
      break
    case 'month':
      // 获取本月第一天
      startTime.value = uni.$uv.timeFormat(
        date.getTime() - (date.getDate() - 1) * 24 * 60 * 60 * 1000,
        'yyyy/mm/dd 00:00',
      )
      break
    case 'year':
      // 获取今年第一天
      startTime.value = uni.$uv.timeFormat(new Date(date.getFullYear(), 0, 1), 'yyyy/mm/dd 00:00')
      break
  }
  changePicker(pickerModel.value, pickerModel.value === 'start' ? startTime.value : endTime.value)
}

function handlePickerChange({ value }) {
  if (pickerModel.value !== 'start') {
    endTime.value = uni.$uv.timeFormat(value, 'yyyy/mm/dd hh:MM')
  } else {
    startTime.value = uni.$uv.timeFormat(value, 'yyyy/mm/dd hh:MM')
  }
}
</script>

<template>
  <view class="flex items-center px-[15px] py-[10ox]" @click="show = true">
    <view>
      <wd-text :text="startTime" size="14px" color="#333" />
    </view>
    <view class="mx-2">
      <wd-text text="-" size="14px" color="#333" />
    </view>
    <view>
      <wd-text :text="endTime" size="14px" color="#333" />
    </view>
    <view>
      <wd-icon name="fill-arrow-down" size="22px" color="#909193" />
    </view>
  </view>
  <wd-popup v-model="show" position="bottom" custom-style="border-radius:16rpx  16rpx 0  0;">
    <view>
      <view class="flex items-center justify-between px-4 pt-2">
        <wd-button type="text" />
        <wd-text text="时间范围" class="flex-1 text-center" color="#333" size="14" />
        <wd-button type="text" @tap="show = false">确定</wd-button>
      </view>
      <uv-line />
      <view class="px-[15px] py-[20px]">
        <view>
          <wd-radio-group v-model="currentMode" shape="button" @change="modeChange">
            <wd-radio value="today">今日</wd-radio>
            <wd-radio value="yesterday">昨日</wd-radio>
            <wd-radio value="week">本周</wd-radio>
            <wd-radio value="month">本月</wd-radio>
            <wd-radio value="year">今年</wd-radio>
          </wd-radio-group>
        </view>
      </view>
      <view class="flex items-center justify-center">
        <view
          class="w-[30%]"
          :class="`${pickerModel === 'start' ? ' border-b-1 border-b-primary border-b-solid' : ''}`"
          @click="changePicker('start', startTime)"
        >
          <wd-input
            v-model="startTime"
            no-border
            readonly
            :custom-input-class="`${pickerModel === 'start' ? '!text-primary' : ''} text-right`"
          />
        </view>
        <view class="mx-6 h-[1px] w-[20px] bg-[#D9D9D9]" />
        <view
          :class="`${pickerModel === 'end' ? ' border-b-1 border-b-primary border-b-solid' : ''}`"
          class="w-[30%]"
          @click="changePicker('end', endTime)"
        >
          <wd-input
            v-model="endTime"
            no-border
            readonly
            :custom-input-class="`${pickerModel === 'end' ? '!text-primary' : ''} text-right`"
          />
        </view>
      </view>
      <view>
        <wd-datetime-picker-view
          v-model="pickerValue"
          label="日期选择"
          :formatter="formatter"
          @change="handlePickerChange"
        />
      </view>
      <AppSafeBottom />
    </view>
  </wd-popup>
</template>

<style scoped lang="scss"></style>
